import { ProTable } from '@ant-design/pro-components';
import { Button, Tag, Popconfirm, message, Breadcrumb } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { useRequest } from 'umi';
import {
  ModalForm,
  ProForm,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';

import styles from './index.less';

export default () => {
  //获取用户变化流水
  const findUserChangeByYearAndType = useRequest(
    (data = { year: '2022', type: '固定人员' }) => {
      return {
        url: `http://10.1.40.84:9993/user/findUserChangeByYearAndType`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
  );
  const columns = [
    {
      title: '工号',
      align: 'center',
      dataIndex: 'username',
      key: 'username',
      width: 100,
      hideInSearch: true,
    },
    {
      title: '姓名',
      align: 'center',
      dataIndex: 'realName',
      key: 'realName',
      hideInSearch: true,
      width: 100,
    },
    {
      title: '性别',
      align: 'center',
      dataIndex: 'gender',
      key: 'gender',
      width: 100,
      hideInSearch: true,
    },
    {
      title: '人员类型',
      align: 'center',
      dataIndex: 'type',
      key: 'type',
      valueType: 'select',
      valueEnum: {
        固定人员: '固定人员',
        流动人员: '流动人员',
      },
    },
    {
      title: '年份',
      align: 'center',
      dataIndex: 'year',
      key: 'year',
      valueType: 'dateYear',
      hideInTable: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
    },
    {
      title: '学院',
      align: 'center',
      dataIndex: 'unit',
      key: 'unit',
      hideInSearch: true,
    },
    {
      title: '手机号',
      align: 'center',
      dataIndex: 'mobilePhoneNum',
      key: 'mobilePhoneNum',
      hideInSearch: true,
    },
    {
      title: '入站时间',
      align: 'center',
      dataIndex: 'enterTime',
      key: 'enterTime',
      hideInSearch: true,
    },
    {
      title: '出站时间',
      align: 'center',
      dataIndex: 'exitTime',
      key: 'exitTime',
      hideInSearch: true,
    },
  ];
  return (
    <PageContainer
      header={{
        title: '红色代表该人员当年离开实验室，绿色代表该人员当年新加入实验室',
        breadcrumb: (
          <Breadcrumb>
            <Breadcrumb.Item>系统管理</Breadcrumb.Item>
            <Breadcrumb.Item>人员流动</Breadcrumb.Item>
          </Breadcrumb>
        ),
      }}
    >
      <ProTable
        columns={columns}
        dataSource={findUserChangeByYearAndType?.data || []}
        rowKey="id"
        pagination={{
          showQuickJumper: true,
        }}
        rowClassName={(record: any) => {
          if (record.yearFlag === '离开') {
            return styles.leave;
          } else if (record.yearFlag === '正常') {
            return null;
          } else if (record.yearFlag === '新增') {
            return styles.add;
          }
          //  else if (record.yearFlag === '变更') {
          //   return styles.change;
          // }
          else {
            return null;
          }
        }}
        form={{
          ignoreRules: false,
        }}
        dateFormatter="string"
        headerTitle="人员列表"
        options={false}
        onReset={() => {
          findUserChangeByYearAndType.run();
        }}
        onSubmit={(e) => {
          if (Object.keys(e).length !== 0) {
            findUserChangeByYearAndType.run(e);
          }
        }}
      />
    </PageContainer>
  );
};
